<template>
  <div class="login-box">
    <div class="login-page-container">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" label-width="80px"
        class="demo-ruleForm login-container">
        <h3 class="title">註冊</h3>
        <el-form-item prop="account" label="帳號">
          <el-input type="text" v-model="ruleForm.account" placeholder="請輸入登入帳號" clearable></el-input>
        </el-form-item>
        <el-form-item prop="name"  label="名稱">
          <el-input type="text" v-model="ruleForm.name" placeholder="請設置名稱" clearable></el-input>
        </el-form-item>
        <el-form-item prop="checkPass" label="密碼">
          <el-input type="password" v-model="ruleForm.checkPass" placeholder="請輸入登入密碼" clearable></el-input>
        </el-form-item>
        <el-form-item prop="checkPass" label="確認密碼">
          <el-input type="password" v-model="ruleForm.reCheckPass" placeholder="請再輸入一次密碼" clearable></el-input>
        </el-form-item>
        <!-- 密码必须为8-12位，并由数字，大小写字母及特殊符号组成 -->

        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click="regist" :loading="loading">註冊</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

export default {
  name: 'register',

  data() {
    return {
      loading: false,
      ruleForm: {
        account: '',
        checkPass: '',
        name: ''
      },
      rules: {
        account: [{
          required: true,
          message: '請輸入一個想要註冊的帳號',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '請輸入一個名稱',
          trigger: 'blur'
        }],
        checkPass: [{
          required: true,
          message: '請輸入密碼',
          trigger: 'blur'
        }],
        reCheckPass: [{
          required: true,
          message: '請確認密碼',
          trigger: 'blur'
        }]
      }
    }
  },

  methods: {
    //注册
    regist() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.loading = true
          if(this.ruleForm.checkPass !== this.ruleForm.reCheckPass) {
            this.loading = false
            this.$message.error('兩次輸入的密碼不一致！')
            return false
          }
          const params = {
            account: this.ruleForm.account,
            password: this.ruleForm.checkPass,
            name: this.ruleForm.name
          }
          this.$store.dispatch('common/fetchRegister', params).then(res => {
            // console.log('注册打印')
            // console.log(res)
            this.loading = false
            this.$message.success(res.message)
            sessionStorage.setItem("user", JSON.stringify(params)) // session存储用户信息
            this.$router.push({
              name: 'Login'
            }) // 注册成功跳转登录页
            return
          }).catch(err => {
            console.error(err)
            this.loading = false
            this.$message.error(err)
            return false
          })
        } else {
          this.$message.error('註冊提交時出現意外錯誤！')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/them.scss";

.login-box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: $globalBgColor;
}

.login-container {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 80px auto;
  width: 350px;
  padding: 35px 24px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.el-form-item__label {
  width: auto;
}

label.el-checkbox.remember {
  margin: 0px 0px 35px 0px;
}
</style>
